@import "./common.scss";

.web{
    @include web(750,1200);
    header{
        @include web(750,111);
        .title-product{
            img{
                width: size(62);
                height: size(50);
            }
        }
    }

    main{
        @include web(720,1120);
        margin-top: size(150);
        .mymain{
            .portrait{
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height:size(60);
                img{
                    width: size(170);
                    height: size(170);
                }
                .landing{
                    @include web(528,120);
                    font-size: size(26);
                    color: gray;
                    margin-left: size(12);
                    a{
                        text-decoration: none;
                        color: black;
                        font-size: size(30);
                    }
                }
                .this{
                    font-size: size(87);
                }
            }

            .functions{
                @include web(710,160);
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                margin-top: size(30);
                .functions-one{
                    @include web(195,160);
                    background-color: #b2e0a0;
                    text-align: center;
                    line-height: size(40);
                    font-size:size(26);
                    img{
                        width: size(79);
                        height: size(82);
                        margin-top: size(20);
                    }
                }
                .functions-two{
                    @extend .functions-one;
                    background-color: #a0dce0;
                    img{
                        width: size(84);
                        height: size(80);
                    }
                }
                .functions-three{
                    @extend .functions-one;
                    background-color: #e0b7a0;
                    img{
                        width: size(124);
                        height: size(80);
                    }
                }
                
            }

            .my-groupresou{
                @include web(718,375);
                margin-top: size(45);
            .groupresou{
                @include web(710,52);
                display: flex;
                justify-content:space-between;
            .preferential{
                    display: flex;
                    align-items: center;
                img{
                    width: size(70);
                    height: size(74);
                }
                span{
                    font-size: size(30);
                    margin-left: size(10);
                }
            }
                .imggengduo{
                    display: flex;
                    align-items: center;
                    span{
                        font-size: size(24);
                        margin-right: size(10);
                    }
                    img{
                        width: size(25);
                        height: size(26);
                        }
                    }   
                }
                .groupresou-one{
                    @extend .groupresou;
                    margin-top: size(30);
                    .preferential{
                        img{
                            width: size(70);
                            height: size(74);
                        }
                    }
                }
                .groupresou-two{
                    @extend .groupresou;
                    .preferential{
                        img{
                            width: size(70);
                            height: size(58);
                        }
                    }
                    margin-top: size(30);
                }
                .groupresou-three{
                    @extend .groupresou;
                    margin-top: size(30);
                    .preferential{
                        img{
                            width: size(70);
                            height: size(59);
                        }
                    }
                }
            }

            .returns{
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                margin-top: size(35);
                input{
                    width: size(147);
                    height: size(76);
                    background-color: $back;
                    color: white;
                    border-radius: size(50);
                    border: none;
                }
            }
        }
    }
}